import s from './header.less'
import React, { Component } from 'react'
import { Menu, Dropdown, Icon } from 'antd'
import { connect } from 'dva'
import confirm from '@c/delete-confirm'

@connect(s => ({
  ...s.login,
}))
class Head extends Component {
  loginOut = () => {
    confirm('确定要退出吗?', () => {
      this.props.dispatch({
        type: 'login/loginOut',
      })
    })
  }
  // componentDidMount() {}
  renderDrop = () => {
    return (
      <Menu className={s['out-btns']}>
        <Menu.Item onClick={this.loginOut}>退出登录</Menu.Item>
      </Menu>
    )
  }

  render() {
    const { userInfo: { userCnName } } = this.props
    return (
      <div className={'header'}>
        <div className={s['hd-right']}>
          <div className={s['hd-item']}>
            <div className={s['user-info-box']}>
              <Dropdown overlay={this.renderDrop()}>
                <div className={s['user-name']}>
                  <span>{userCnName}</span>
                  <Icon type="caret-down" theme="filled"/>
                </div>
              </Dropdown>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default Head
